<template>
    <div>
        <el-card>
            <h1 style="text-align: center;margin: 15px auto">{{ detail.name }}</h1>
            <el-divider></el-divider>
            <div style="margin-top:35px;display: flex;justify-content: space-between">
                <span><i class="el-icon-view"></i> {{ detail.views }}人看过</span>
                <span><i class="el-icon-timer"></i> {{ formattedCreateTime }}</span> <!-- 使用计算属性显示格式化后的时间 -->
                <span><i class="el-icon-user-solid"></i> {{ detail.user }}</span>
            </div>
            <el-divider></el-divider>

            <div v-html="detail.content" style="text-indent: 2em;line-height: 35px"></div>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                id: this.$route.query.id,
                detail: {}
            }
        },
        computed: {
            // 计算属性用于格式化时间
            formattedCreateTime() {
                const createTime = new Date(this.detail.createTime);
                createTime.setHours(createTime.getHours() + 8); // 加8小时
                return this.formatDate(createTime); // 格式化时间
            }
        },
        created() {
            this.$axios.get("/news/getById?id=" + this.id).then(res => {
                this.detail = res.data;
            });
        },
        methods: {
            // 方法用于格式化日期
            formatDate(date) {
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hour = date.getHours().toString().padStart(2, '0');
                const minute = date.getMinutes().toString().padStart(2, '0');
                const second = date.getSeconds().toString().padStart(2, '0');
                return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
            }
        }
    }
</script>